<template>
  <div id="Content">
    <form> <!-- action="order/viewOrder" method="post"-->
      <div id="Catalog">请确认以下信息并点击“确认”按钮继续...
        <table>
          <tr>
            <th align="center" colspan="2">
              <span style="font-size: medium; "><b>订单</b></span>
              <br />
              <span style="font-size: small; ">
                                <b>{{ formatDate(orderDate)}}</b>
                            </span>
            </th>
          </tr>

          <tr>
            <th colspan="2"><h2>支付方信息</h2></th>
          </tr>
          <tr>
            <td>名:</td>
            <td>{{confirmForm.billToFirstName}} </td>

          </tr>

          <tr>
            <td>姓:</td>
            <td> {{ confirmForm.billToLastName }}</td>
          </tr>
          <tr>
            <td>地址一:</td>
            <td> {{ confirmForm.billAddress1 }}</td>
          </tr>

          <tr>
            <td>城市:</td>
            <td> {{ confirmForm.billCity }}</td>
          </tr>
          <tr>
            <td>省份:</td>
            <td>{{confirmForm.billState}}</td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td>{{ confirmForm.billZip }}</td>
          </tr>
          <tr>
            <td>国家:</td>
            <td>{{ confirmForm.billCountry }}</td>
          </tr>
          <tr>
            <th colspan="2">配送信息</th>
          </tr>
          <tr>
            <td>名:</td>
            <td> {{ confirmForm_ship.shipToFirstName }}</td>
          </tr>
          <tr>
            <td>姓:</td>
            <td> {{ confirmForm_ship.shipToLastName }}</td>
          </tr>
          <tr>
            <td>地址一:</td>
            <td>{{ confirmForm_ship.shipAddress1 }}</td>
          </tr>
          <tr>
            <td>城市:</td>
            <td>{{confirmForm_ship.shipCity}}</td>
          </tr>
          <tr>
            <td>省份:</td>
            <td>{{confirmForm_ship.shipState}}</td>
          </tr>
          <tr>
            <td>邮政编码:</td>
            <td>{{ confirmForm_ship.shipZip }}</td>
          </tr>
          <tr>
            <td>国家:</td>
            <td> {{ confirmForm_ship.shipCountry }}</td>
          </tr>

        </table>
        <br>
        <br>
        <el-button name="confirmOrder" @click="showPop">
            确认
        </el-button>
        <!-- <input type="Button" name="confirmOrder" value="确认" @click="showPop" />  -->
        <!--  type="submit" name="confirmOrder"-->
      </div>


    </form>


    <div class="dialog-mask" v-if="pay">
      <div class="dialog" style="width: 275px;height: 200px">
        <form>
        <a class="popup_title" style="position: relative;top: -5px">请通过支付宝支付</a>

        <form ref="form" :action="formActionUrl" id="alipay" name="alipay" method="post"></form>
        <img src="../../assets/images/alipay.png" class="popup_img" style="height: 100px;width: 100px;position: relative;left: 65px">

        <el-button type="primary"  @click="pagePay" style="position: relative;left: -90px;top: 30px">支付宝支付</el-button>

        <el-button type="button" class="btn app-btn-secondary" @click="showPop" style="position: relative;left: 130px">取消</el-button>


        </form>
      </div>
    </div>


    </div>

    <br>
    <br>



</template>

<script>
import {reactive,ref} from "vue";
import api from "@/api";

export default {


  data() {
    return {
      formActionUrl: '',
      price: sessionStorage.getItem('total'), // 订单金额
    };
  },
  methods: {
    pagePay() {
      const orderNoJson = sessionStorage.getItem('order')
      const order = JSON.parse(orderNoJson)
      console.log(order)

      api.confirmAlipay(order).then(res =>{
        console.log("******************************************")
        console.log(res.data.msg)

      })

      api.getAlipay(this.price).then(response => {
        this.$refs.form.action = response.data;  // 将form的action属性设置为后端返回的支付宝支付页面URL
        this.$refs.form.submit();  // 提交form


      }).catch(error => {
        console.error(error);
      });




    },
  },

  setup(){
    //拿到订单时间
    const orderDate = sessionStorage.getItem('orderDate')

    function formatDate(value) {
      if (value) {
        const date = new Date(value);
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        const hours = ('0' + date.getHours()).slice(-2);
        const minutes = ('0' + date.getMinutes()).slice(-2);
        const seconds = ('0' + date.getSeconds()).slice(-2);
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    }
    //控制弹窗的变量
    const pay = ref(false);
    function showPop(){
      pay.value = !pay.value;
    }

    const orderNoJson = sessionStorage.getItem('order')
    const order = JSON.parse(orderNoJson)


    const confirmFormSession =sessionStorage.getItem('confirmForm1')
    const confirmFormSession_ship =sessionStorage.getItem('confirmForm2')

    const confirmForm = JSON.parse(confirmFormSession)
    const confirmForm_ship =JSON.parse(confirmFormSession_ship)


    return{
      showPop,
      order,
      pay,
      confirmForm,
      confirmForm_ship,
      orderDate,
      formatDate
    };
  }
}
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

table {
    text-align: center;
    border-collapse:collapse;
}

td {
    padding: 20px 38px;
}

tr:nth-child(2n-1) td {
    background-color: rgba(222, 222, 222, 0.53);
}

tr:nth-child(2n) td {
    background-color: rgba(222, 222, 222, 0.72);
}
</style>